<template>
	<div class="page has-navbar" v-nav="{title: titleIs, showBackButton: true}">
		<div class="page-content padding-top">
			<div class="statibox">
				<div class="statibox-tab">
					<table>
						<tr>
							<td v-for="(item,index) in tabs" @click="onTabChange(index)">{{item}}</td>
						</tr>
					</table>
					<em class="statibox-tab-after" ref="statiafter"></em>
				</div>
				<!--<tabsection :params = "params" />-->
				<div class="posr">
					<transition name="fold">
						<div v-if="$route.query.follow">
							<follow @tabMenuChange="tabMenuChange" v-if="tabIndex==0"></follow>
							<follow-list v-else @tabMenuChange="tabMenuChange"></follow-list>
						</div>
						<div v-else>
							<tabsection @tabMenuChange="tabMenuChange" v-if="tabIndex==0" />
							<list v-else @tabMenuChange="tabMenuChange" />
						</div>
					</transition>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import tabsection from 'src/components/statistics/tabs_section.vue'
	import list from 'src/components/statistics/tabs_list.vue'
	import follow from 'src/components/statistics/follow.vue'
	import followList from 'src/components/statistics/follow_list.vue'
	export default {
		data() {
			return {
				//导航列表
				tabs: [
					"结构",
					"明细"
				],
				tabIndex: 0,
				params: {
					params: {

					}
				},
				title: [{
						typeId: 1,
						name: '入库累计'
					},
					{
						typeId: 2,
						name: '出库累计'
					},
					{
						typeId: 3,
						name: '当月库存'
					},
					{
						typeId: 4,
						name: '当前库存'
					},
					{
						typeId: 5,
						name: '预定累计'
					},
					{
						typeId: 10,
						name: '已跟进'
					},
					{
						typeId: 20,
						name: '已接待'
					},
					{
						typeId: 50,
						name: '已成交'
					},
				],
				titleIs: ''
			}
		},
		components: {
			tabsection,
			list,
			follow,
			followList
		},
		created(){
			this.queryRouter()
			this.titleChange()
		},
		methods: {
			statiIndex() {},
			// tab 标签底部自动
			onTabChange(a) {
				this.tabIndex = a
				this.statiafter.style.left = 100 / (this.tabs.length) * a + '%'
				//console.log(this)
				var urls = this.params.params.month != '' ? this.params.params.month : this.params.params.startDate
			},
			// tab 标签自动	
			statiafterChange() {
				this.statiafter.style.width = 100 / (this.tabs.length) + '%'
			},
			// 获取路由传参
			queryRouter() {
				//				console.log(this.$route.query)
				if(this.$route.query.time) {
					this.params.params.month = this.$route.query.time
					this.params.params.startDate = ''
				}
				if(this.$route.query.timeDay) {
					this.params.params.startDate = this.$route.query.timeDay
					this.params.params.month = ''
				}
				this.params.params.shopId = this.$route.query.shopId
				this.params.params.marketId = this.$route.query.marketId
				this.params.params.statisType = this.$route.query.typeId
				console.log(this.params)
			},
			// tab导航变化
			tabMenuChange(a) {
				this.statiafter.style.left = 100 / (this.tabs.length) * a + '%'
			},
			// 标题变化
			titleChange() {
				
				console.log(this.params.params.statisType)
				for(let item of this.title) {
					if(item.typeId == this.params.params.statisType) {
						this.titleIs = item.name
					}
				}
//				console.log(this.titleIs)
			}
		},
		computed: {
			// 获取tab标签dom
			statiafter() {
				return this.$refs.statiafter
			},
			queryData(){
				return this.$router.query
			}
		},
		mounted: function() {
			
			setTimeout(() => {
				this.statiafterChange()
				
			}, 20)
		},
		
		watch: {

		}
		

	}
</script>
<style>
	.fold-enter-active,
	.fold-leave-active {
		transition: all .4s ease-in-out;
		-webkit-transition: all .4s ease-in-out;
	}
	
	.fold-enter,
	.fold-leave-to {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
</style>